<template>
    <section class="real-app">
        <input
                type="text"
                class="add-input"
                autofocus="autofocus"
                placeholder="接下来要做什么？"
                @keyup.enter="addTodo"
        >
        <Item
                :todo="todo"
                v-for="todo in filteredTodos"
                :key="todo.id"
                @del="del"
        ></Item>
        <Tabs
                :filter="filter"
                :todos="todos"
                @toggle="toggleFilter"
        ></Tabs>
    </section>
</template>

<script>
    import Item from './item.vue'
    import Tabs from './tabs.vue'
    let id = 0
export default {
      name: 'todo',
      data () {
        return {
          todos: [],
          filter: 'all'
        }
      },
      components: {
        Item,
        Tabs
      },
      computed: {
        filteredTodos () {
          if (this.filter === 'all') {
            return this.todos
          }
          const completed = this.filter === 'completed'
          return this.todos.filter(todo => completed === todo.completed)
        }
      },
      methods: {
        addTodo (e) {
          this.todos.unshift({
            id: id++,
            content: e.target.value.trim(),
            completed: false
          })
          e.target.value = ''
        },
        del (id) {
          for (let k in this.todos) {
            if (this.todos[k].id === id) {
              this.todos.splice(k, 1)
              return
            }
          }
        },
        toggleFilter (state) {
          this.filter = state
        },
        clearAll () {
          this.todos = this.todos.filter(todo => !todo.completed)
        }
      }
    }
</script>

<style lang="stylus" scoped>
.real-app
    width 600px
    margin 0 auto
    box-shadow 0 0 5px #666
.add-input
    position: relative
    width 100%
    font-size 24px
    line-height 1.4em
    outline none
    color inherit
    padding 16px
    border 1px solid #999
    box-sizing border-box

</style>